<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no" />
  <meta name="format-detection" content="email=no" />
  <title>物流弹窗</title>
  <link rel="stylesheet" href="../../css/api.css">
  <link rel="stylesheet" href="../../css/main.css">
  <link rel="stylesheet" href="../../css/vant.css">
  <style>
      html,body{
          background-color: transparent !important;
      }
      .select {
          width: 100%;
          border: none;
          height: 100%;
          background: inherit;
          outline: none;
          appearance: none;
          -webkit-appearance: none;
      }
      .input {
          font-size: .14rem;
          color: rgba(51, 51, 51, 100)
      }
  </style>
</head>

<body>
<div class="app" v-cloak>
  <van-popup v-model="showReturn" :style="{ height: '40%',width:'90%'}" round @closed="onClosed">
    <div class="order-return">
      <div class="title">退换货物流信息</div>
      <div class="f1">
        <div>物流单号</div>
        <div>
          <input type="text" class="input" placeholder="请输入物流单号" maxlength="30" v-model="expressNo" />
        </div>
      </div>
      <div class="f2">
        <div>承运商</div>
        <div class="flex-x-sb">
          <select class="select input" v-model="expressId">
            <option value="">请选择</option>
            <option :value="expressCompany.id" v-for="expressCompany in expressCompanies">{{expressCompany.name}}</option>
          </select>
          <span class="iconfont">&#xe65c;</span>
        </div>
      </div>
      <div class="btn flex-x-sb">
        <div class="cancel" @click="cancelBtn">取消</div>
        <div class="confirm" @click="conformBtn">确认</div>
      </div>
    </div>
  </van-popup>
</div>
<script src="../../script/api.js "></script>
<script src="../../script/flexible.js "></script>
<script src="../../script/fastclick.js "></script>
<script src="../../script/vue.min.js "></script>
<script src="../../script/iconfont.js "></script>
<script src="../../script/vant.min.js "></script>
<script src="../../script/restful.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/businessCommon.js"></script>
<script>
  apiready = function() {
    var vm = new Vue({
      el: '.app',
      data:{
        id: api.pageParam.id,
        expressNo: '',
        expressId: '',
        expressCompanies: [],
        showReturn: false,
      },
      mounted: function() {
        order('getExpressCompanies')({status: 1, pageSize: 100},function(ret){
          vm.expressCompanies = ret.data.list;
        })
        this.showReturn = true;
      },
      methods: {
        cancelBtn() {
          console.log(this.expressId);
          this.showReturn = false;

        },
        conformBtn() {
          if (!this.expressId || !this.expressNo) {
            toastMiddle('请填写相关信息')
          } else {
            order('setReturnLogistics')({
              id: vm.id,
              expressNo: vm.expressNo,
              expressId: vm.expressId
            },function(ret){
              toastMiddle('操作成功');
              vm.showReturn = false;
              api.sendEvent({name: 'refreshOrderList'});
            })
          }
        },
        onClosed() {
          console.log('关闭frame...')
          api.closeFrame();
        },
      },
    })
  }
</script>
</body>

</html>